<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>学知鸟</title>
		<link rel="shortcut icon" href="../../share/img/logo.png">
		<link rel="stylesheet" href="../../share/css/main.css">
		<script src="../../share/js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../share/js/vue/vue.2.6.12.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../share/js/util.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="row">
			<div class="col-1">
				<section id="app1">
					<h3>数据绑定</h3>
					<div>{{name}}</div>
					<div :style="{backgroundColor:color, height:'5px'}"></div>
					<div v-html="memo"></div>
				</section>
				<section id="app2">
					<h3>表单绑定</h3>
				</section>
			</div>
			<div class="col-1">
				<section id="app3">
					<h3>简单组件</h3>
					<div>
						<shop-header></shop-header>
						<shop-footer></shop-footer>
					</div>
				</section>
				<section id="app4">
					<h3>嵌套组件</h3>
				</section>
			</div>
			<div class="col-1">
				<ul id="log" class="d-list mt-10"></ul>
			</div>
		</div>
		<script type="text/javascript">
			var app1 = new Vue({
				el: "#app1",
				data: {
					name: "苹果",
					color: "red",
					memo: "<b>美味多汁</b>"
				}
			});
			var app2 = new Vue({
				el: "#app2",
				data: {

				}
			});
			(function() {
				let shopHeader = Vue.extend({
					template: `<div style='background-color:#09f;padding:10px'><a v-for='item in links' :href='item.url' style='margin:5px'>{{item.name}}</a></div>`,
					data() {
						return {
							links: [{
								name: '首页',
								url: '#home'
							}, {
								name: '商品',
								url: '#product'
							}, {
								name: '购物车',
								url: '#cart'
							}, {
								name: '我的',
								url: '#my'
							}]
						}
					}
				});
				let shopFooter = {
					template:`<div style='background-color:#ddd;padding:10px'>飘香果农业有限公司</div>`,
				};
				var app3 = new Vue({
					el: "#app3",
					components: {
						shopHeader,
						shopFooter,
					}
				});
			})();
		</script>
	</body>
</html>
